import React, {Component} from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";

/*
*  测试 内部状态 state 的使用方法
*  点击按钮时内部状态数加一
* */
export default class MyCounter  extends Component{
    constructor(props) {
        super(props);
        this.handlerClick = this.handlerClick.bind(this);
        this.state = {
            count:0,
        }
    }

    static defaultProps = {
        text:'更新',
    };

    handlerClick(e){
        e.preventDefault();
        this.setState({
            count:this.state.count+1,
        })
    }
    render() {
        return(
            <div>
                <p>{this.state.count}</p>
                <a href="#" onClick={this.handlerClick}>{this.props.text}</a>
                <Box component="span" m={1}>
                    <Button >bb</Button>
                </Box>
                <Box color="text.primary" clone>
                    <Button >bb</Button>
                </Box>
                <Container maxWidth="100sm">
                    <Button >bb</Button>
                </Container>
            </div>
        );
    }
}